<template>
  <div class="c-p c-pz101">
    <!-- 优惠券1 -->
    <template v-if="item.defaultImg == 7 && !$isWxAppIos()">
      <div class="c-ww100 c-flex-row c-aligni-center c-pf" :class="[item.position == 1 ? 'c-p-r8' : 'c-p-l8', bottomPosition]" @click="clickToUrl(item.redirect)">
        <img :src="require('@/assets/i/wap/suspension/suspensionPicOne.png')" class="shake">
        <img :src="require('@/assets/i/wap/suspension/coin1.png')" class="coin1 c-pa c-ww24">
        <img :src="require('@/assets/i/wap/suspension/coin2.png')" class="coin2 c-pa c-ww14">
        <img :src="require('@/assets/i/wap/suspension/coin3.png')" class="coin3 c-pa c-ww6">
      </div>
    </template>
    <!-- 大转盘1 -->
    <template v-if="item.defaultImg == 9">
      <div class="c-ww120 c-flex-row c-flex-center c-pf c-p-r4 c-hh136" :class="[item.position == 1 ? 'c-p-r0' : 'c-p-l0', bottomPosition]" @click="clickToUrl(item.redirect)">
        <img :src="require('@/assets/i/wap/suspension/suspensionPicTwo.png')" class="c-pa c-p-b0 c-p-l0 c-p-r0 c-mlr-auto c-ww76">
        <div class="c-flex-row c-flex-center c-p">
          <div class="turn c-ww120 c-hh120"></div>
          <img :src="require('@/assets/i/wap/suspension/picTwoTxt.png')" class="c-pa c-p-b0 c-p-l0 c-p-r0 c-p-turnt c-margin c-ww32">
        </div>
      </div>
    </template>
    <!-- 投票1 -->
    <template v-if="item.defaultImg == 11">
      <div class="c-flex-row c-flex-center c-pf c-ww100" :class="[item.position == 1 ? 'c-p-r16' : 'c-p-l0', bottomPosition]" @click="clickToUrl(item.redirect)">
        <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/suspension/suspensionPicThree.png">
        <img :src="require('@/assets/i/wap/suspension/picThreeVote.png')" class="vote c-pa c-p-l0 c-p-r0 c-mlr-auto c-p-b30">
        <img :src="require('@/assets/i/wap/suspension/flower1.png')" class="flower1 c-pa c-ww16">
        <img :src="require('@/assets/i/wap/suspension/flower2.png')" class="flower2 c-pa">
        <img :src="require('@/assets/i/wap/suspension/flower3.png')" class="flower3 c-pa">
      </div>
    </template>
    <!-- 优惠券2 -->
    <template v-if="item.defaultImg == 12 && !$isWxAppIos()">
      <div class="c-flex-row c-flex-center c-pf c-ww100" :class="[item.position == 1 ? 'c-p-r16' : 'c-p-l10', bottomPosition]" @click="clickToUrl(item.redirect)">
        <div class="c-flex-column c-aligni-center c-p">
          <img :src="require('@/assets/i/wap/suspension/style2_coupon7.png')">
          <img :src="require('@/assets/i/wap/suspension/style2_coupon1.png')" class="c-pa c-p-l0 c-p-r0 c-mlr-auto style2_coupon1">
          <img :src="require('@/assets/i/wap/suspension/style2_coupon6.png')" class="c-pa c-p-l0 c-p-r0 c-mlr-auto style2_coupon6">
        </div>
        <img :src="require('@/assets/i/wap/suspension/style2_coupon8.png')" class="style2_coupon8 c-pa">
        <img :src="require('@/assets/i/wap/suspension/style2_coupon4.png')" class="style2_coupon4 c-pa">
        <img :src="require('@/assets/i/wap/suspension/style2_coupon3.png')" class="style2_coupon3 c-pa">
        <img :src="require('@/assets/i/wap/suspension/style2_coupon5.png')" class="style2_coupon5 c-pa">
        <img :src="require('@/assets/i/wap/suspension/style2_coupon2.png')" class="style2_coupon2 c-pa">
      </div>
    </template>
    <!-- 大转盘2 -->
    <template v-if="item.defaultImg == 13">
      <div class="c-ww120 c-flex-row c-flex-center c-pf c-p-r4 c-hh136" :class="[item.position == 1 ? 'c-p-r0' : 'c-p-l0', bottomPosition]" @click="clickToUrl(item.redirect)">
        <img :src="require('@/assets/i/wap/suspension/style2_turn1.png')" class="c-pa c-p-b0 c-p-l0 c-p-r0 c-mlr-auto c-ww100 style2_turn1">
        <div class="c-flex-row c-flex-center c-p">
          <div class="turn1 c-ww100 c-hh100"></div>
          <img :src="require('@/assets/i/wap/suspension/style2_turn2.png')" class="c-pa c-p-b0 c-p-l0 c-p-r0 c-margin c-ww54 style2_turn2">
          <img :src="require('@/assets/i/wap/suspension/style2_vote1.png')" class="style2_turn3 c-pa">
          <img :src="require('@/assets/i/wap/suspension/style2_vote1.png')" class="style2_turn4 c-pa">
          <img :src="require('@/assets/i/wap/suspension/style2_vote2.png')" class="style2_turn5 c-pa">
        </div>
      </div>
    </template>
    <!-- 投票2 -->
    <template v-if="item.defaultImg == 14">
      <div class="c-flex-row c-flex-center c-pf c-ww100" :class="[item.position == 1 ? 'c-p-r16' : 'c-p-l10', bottomPosition]" @click="clickToUrl(item.redirect)">
        <div class="c-flex-column c-aligni-center c-p c-pz10">
          <img :src="require('@/assets/i/wap/suspension/style2_vote6.png')">
          <img :src="require('@/assets/i/wap/suspension/style2_vote5.png')" class="c-pa c-p-l0 c-p-r0 c-mlr-auto style2_vote5">
          <img :src="require('@/assets/i/wap/suspension/style2_vote3.png')" class="style2_vote3 c-pa c-pz1">
          <img :src="require('@/assets/i/wap/suspension/style2_vote1.png')" class="style2_coupon4 c-pa c-pz1">
          <img :src="require('@/assets/i/wap/suspension/style2_vote2.png')" class="style2_coupon5 c-pa c-pz1">
          <img :src="require('@/assets/i/wap/suspension/style2_vote4.png')" class="style2_vote4 c-pa c-pz10">
        </div>
      </div>
    </template>
    <template v-if="item.defaultImg == 0 && item.customImg && item.customImg.length > 0">
      <div class="c-flex-row c-flex-center c-pf c-ww90 c-maxh150" :class="[item.position == 1 ? 'c-p-r16' : 'c-p-l16', bottomPosition]" @click="clickToUrl(item.redirect)">
        <img :src="$addXossFilter(item.customImg)" class="c-maxw">
      </div>
    </template>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import { appRouterChange } from "@/mixin/appRouterPush.js";
export default {
  name: 'suspensionCom',
  mixins: [appRouterChange],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
    };
  },
  watch: {
    item(oldVal, newVal) {
      if (newVal && !newVal.iconNum) {
        this.item.iconNum = 0;
      }
    }
  },
  computed: {
    bottomPosition() {
      return this.item && this.item.iconNum && this.item.iconNum > 0 ?
        this.item.iconNum == 1 ? 'p-b256' : (this.item.iconNum == 2 ? 'p-b344' : (this.item.iconNum == 3 ? 'p-b440' : 'p-b528')) : 'p-b330'
    }
  },
  methods: {
    clickToUrl(redirect) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      if (redirect.prodType == 7) {
        let toPath = '/homePage/valueVoucher/list';
        this.iosAppRouteChange(toPath);
      } else if (redirect.prodType == 9 || redirect.prodType == 11) {
        let url = redirect.prodType == 11 ? `/homePage/voting/votingActivity?id=${redirect.prodId}` : `/homePage/marketing/turntable?taId=${redirect.prodId}`
        this.iosAppRouteChange(url);
      } else if (redirect.prodType == -1) {
        let url = `/homePage/agent/promotedAccountList`
        this.iosAppRouteChange(url);
      } else {
        if (!redirect.customUrl.includes("http") && !redirect.customUrl.includes("https")) {
          redirect.customUrl = "http://" + redirect.customUrl;
        }
        utilJs.locationHref(redirect.customUrl, this);
      }
    }
  }
}
</script>
<style scoped>
.c-p-l8 { left: 0.2rem; }
.c-p-r16 { right: 0.4rem; }
.c-p-l16 { left: 0.4rem; }
.c-ww16 { width: 0.4rem; }
.c-p-b240 { bottom: 6rem; }
.c-p-b216 { bottom: 5.4rem; }
.c-p-r4 { right: 0.1rem }
.c-p-turnt { top: calc(50% - 1.65rem); }
.c-margin { margin: auto; }
.shake {
  animation: shake 2s infinite ease-in-out;
}
.coin1 {
  left: 1.2rem;
  top: 2.1rem;
  animation: coin1 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.coin2 {
  right: 1.6rem;
  top: 1.8rem;
  animation: coin2 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.coin3 {
  top: 1rem;
  left: 1rem;
  animation: coin3 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.turn {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/suspension/picTwoTurn.png') no-repeat;
  background-size: 100% 100%;
  animation: turn 5s infinite ease-in-out;
}
.flower1 {
  left: 1.5rem;
  top: 0rem;
  animation: upDown 5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.3s;
}
.flower2 {
  width: 0.35rem;
  left: 0.5rem;
  top: 1.4rem;
  animation: upDown 5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-delay: 0.6s;
}
.flower3 {
  width: 0.18rem;
  top: 1.45rem;
  right: 0.5rem;
  animation: upDown 5s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vote {
  width: 1.5rem;
  animation: vote 1s infinite ease;
}
@keyframes shake{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@keyframes coin1 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-1.4rem, -1.1rem, 0px);
  }
}
@keyframes coin2 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(1.7rem, -1.1rem, 0px);
  }
}
@keyframes coin3 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-0.8rem, 0.7rem, 0px);
  }
}
@keyframes turn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-1800deg);
  }
}
@keyframes upDown{
  0%,
  50%,
  100%{
    transform: translate3d(0,0,0);
  }
  25%,
  75%{
    transform: translate3d(0, -0.2rem,0);
  }
}
@keyframes vote{
  0%, 100%{
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
}
.p-b256 {
  bottom: 6.4rem;
}
.p-b344 {
  bottom: 8.6rem;
}
.p-b440 {
  bottom: 11rem;
}
.p-b528 {
  bottom: 13.2rem;
}
.p-b330 {
  bottom: 8.25rem;
}
.style2_coupon6 {
  bottom: -0.5rem;
}
.style2_coupon1 {
  width: 2.1rem;
  bottom: 0rem;
  left: -0.5rem;
}
.style2_coupon2 {
  width: 0.7rem;
  top: 1rem;
  left: 1rem;
  animation: style2_coupon2 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_coupon2 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-1.1rem, 0.6rem, 0px);
  }
}
.style2_coupon5 {
  width: 0.3rem;
  top: 1rem;
  left: 1rem;
  animation: style2_coupon5 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_coupon5 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-1rem, -0.65rem, 0px);
  }
}
.style2_coupon3 {
  width: 0.75rem;
  top: 1rem;
  left: 1rem;
  animation: style2_coupon3 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_coupon3 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(1rem, 0.3rem, 0px);
  }
}
.style2_coupon4 {
  width: 0.3rem;
  top: 1rem;
  left: 1rem;
  animation: style2_coupon4 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_coupon4 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0.5rem, -1.4rem, 0px);
  }
}
.style2_coupon8 {
  width: 0.6rem;
  top: 1rem;
  left: 1rem;
  animation: style2_coupon8 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_coupon8 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0.7rem, -0.3rem, 0px);
  }
}
.turn1 {
  background: url('../../../assets/i/wap/suspension/style2_turn3.png') no-repeat;
  background-size: 100% 100%;
  animation: turn 4s infinite ease-in-out;
}
.style2_turn2 {
  top: 0.1rem;
}
.style2_turn1 {
  bottom: -0.34rem;
}
.style2_turn3 {
  width: 0.3rem;
  top: 1rem;
  left: 1rem;
  animation: style2_turn3 2.5s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_turn3 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0.9rem, -1rem, 0px);
  }
}
.style2_turn4 {
  width: 0.2rem;
  top: 1rem;
  left: 1rem;
  animation: style2_turn4 2.5s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_turn4 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(1.4rem, -0.3rem, 0px);
  }
}
.style2_turn5 {
  width: 0.3rem;
  top: 1rem;
  left: 1rem;
  animation: style2_turn5 2.5s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_turn5 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-1.2rem, -0.36rem, 0px);
  }
}
.style2_vote4 {
  bottom: -0.4rem;
}
.style2_vote3 {
  width: 0.75rem;
  top: 1.8rem;
  right: -0.4rem;
  animation: style2_vote3 2s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes style2_vote3 {
  0% {
    opacity: 0;
    transform: translate3d(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-0.4rem, -0.5rem, 0px);
  }
}
@keyframes floating {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-0.2rem); /* 向上移动4像素 */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}
.style2_vote5 {
  width: 2.1rem;
  bottom: 0rem;
  left: -0.5rem;
  animation: floating 3s ease infinite; /* 动画名称、持续时间、缓动函数、循环次数 */
}
</style>